<style>
	.tab-content{
		font-size: 25px;
	}
	.tab-content span{
		width: 40px;
		height: 35px;
	}
</style>
#if($!error)
<div class="modal-body pb25">
	<div class="col-md-12 no-p">$!error</div>
</div>
#else
<div class="modal-body no-p" id="_modal_icon_select">
	<div class="col-md-12 no-p">
		<div class="box-tab no-m">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#fontawesome" data-toggle="tab">Fontawesome</a></li>
				<li><a href="#themify" data-toggle="tab">Themify</a></li>
				<li><a href="#glyphicon" data-toggle="tab">Glyphicon</a></li>
				<li><a href="#sli" data-toggle="tab">Simple Line Icons</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane fade active in" id="fontawesome">
					#foreach($!icon in $!fa)
						<span class="$!icon p5" icon="$!icon" title="$!icon"></span>
					#end
				</div>
				<div class="tab-pane fade" id="themify">
					#foreach($!icon in $!ti)
						<span class="$!icon p5" icon="$!icon" title="$!icon"></span>
					#end
				</div>
				<div class="tab-pane fade" id="glyphicon">
					#foreach($!icon in $!gly)
						<span class="$!icon p5" icon="$!icon" title="$!icon"></span>
					#end
				</div>
				<div class="tab-pane fade" id="sli">
					#foreach($!icon in $!sli) <span class="$!icon p5" icon="$!icon" title="$!icon"></span> #end
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal-footer">
	<span id="currentIcon" class="pull-left mt5"><label class="text-danger">当前选择：</label><i></i></span>
	<button id="btnIconCancel" type="button" class="btn btn-default mt5" data-dismiss="modal">取消</button>
	<button type="button" class="btn btn-primary mt5" onclick="doSelect()">确定</button>
</div>
<script type="text/javascript">
	var dialog = ns.view.Dialog.getCur("#_modal_icon_select");
	$(function(){
		$(".tab-content span").hover(function(){
			$(this).addClass("bg-success");
		}, function(){
			if($(this).attr("clicked") != "true")
				$(this).removeClass("bg-success");
		});
		$(".tab-content span").bind("click", function(){
			$(".tab-content span").removeAttr("clicked");
			$(".tab-content span").removeClass("bg-success");
			$(this).attr("clicked", "true");
			$(this).addClass("bg-success");
			$("#currentIcon i").attr("class", $(this).attr("icon"));
		});
		$(".tab-content span").bind("dblclick", function(){
			$("#currentIcon i").attr("class", $(this).attr("icon"));
			doSelect();
		});
	});
	function doSelect(){
		var icon = $("#currentIcon i").attr("class");
		if(!icon){
			ns.tip.toast.info("请选择一个图标！");
		}else{
			if(typeof(dialog.finishSelect) == "function")
				dialog.finishSelect(icon);
			$("#btnIconCancel").click();
		}
	}
</script>
#end